;var tools = (function(){
  function getTarget(e){
    var e = e || window.e;
    return e.target || e.srcElement;
  }
  return {
    getTarget: getTarget,
  }
})()

// 模块化
;(function(doc){
  var Tab = function(){
    var oTab = doc.getElementsByClassName('J_tab')[0],
        oPage = doc.getElementsByClassName('page')[0];
    
    this.oNav = oTab.getElementsByClassName('nav')[0];
    this.oNavItem = oTab.getElementsByClassName('nav-item');
    this.oPageItem = oTab.getElementsByClassName('page-item');

    this.curIdx = 0;
  }

  Tab.prototype.init = function(){
    this.bindEvent();
  }

  Tab.prototype.bindEvent = function(){
    // this.oNav.addEventListener('click', function(e){
    //   var e = e || window.event,
    //       tar = e.target || e.serElement;

    //   console.log(tar);
    // }, false);
    this.oNav.addEventListener('click', this.onNavClick.bind(this), false);

  }

  Tab.prototype.onNavClick = function(e){
    var tar = tools.getTarget(e),
        className = tar.className;
    if(className === 'nav-item'){
      // this.oNavItem[this.curIdx].className = 'nav-item';
      // this.oPageItem[this.curIdx].className = 'page-item';
      this.setCurrent(this.curIdx, 'remove');
      this.curIdx = [].indexOf.call(this.oNavItem, tar);
      // this.oPageItem[this.curIdx].className += ' current';
      // this.oNavItem[this.curIdx].className += ' current';
      this.setCurrent(this.curIdx, 'add');
    }
    
  }

  Tab.prototype.setCurrent = function(index, field){
    switch(field){
      case 'add':
        this.oNavItem[index].className += ' current';
        this.oPageItem[index].className += ' current';
        break;
      case 'remove':
        this.oNavItem[index].className = 'nav-item';
        this.oPageItem[index].className = 'page-item';
        break;
      default:
        break;
    }
  }

  window.Tab = Tab;
})(document)


new Tab();